<template>
    <el-card class="form-container" shadow="never">
        <div v-for="(cate,index) in allResourceCate" :class="index===0?'top-line':null" :key="'cate'+cate.id">
            <el-row class="table-layout" style="background: #F2F6FC;">
                <el-checkbox v-model="cate.checked" :indeterminate="isIndeterminate(cate.id)" @change="handleCheckAllChange(cate)">{{cate.name}}</el-checkbox>
            </el-row>
            <el-row class="table-layout">
                <el-col :span="8" v-for="resource in getResourceByCate(cate.id)" :key="resource.id" style="padding: 4px 0">
                    <el-checkbox v-model="resource.checked" @change="handleCheckChange(resource)">{{resource.name}}</el-checkbox>
                </el-col>
            </el-row>
        </div>
        <div style="margin-top: 20px" align="center">
            <el-button type="primary" @click="handleSave()">保存</el-button>
            <el-button @click="handleClear()">清空</el-button>
        </div>
    </el-card>
</template>

<script>
import {listUmsResourceCategory,listAllUmsResource} from '@/api/ums/resource'
import {listResourceByRole,allocUmsRoleResource} from '@/api/ums/role'
export default {
    name: "allocResource",
    data() {
      return {
        roleId: null,
        allResource: null,
        allResourceCate: null
      };
    },
    created() {
      this.roleId = this.$route.query.roleId;
      this.getAllResourceCateList();
    },
    methods:{
        // 获取资源分类列表
        getAllResourceCateList() {
            listUmsResourceCategory().then(resp=>{
                this.allResourceCate = resp.data.data;
                for(let i = 0; i < this.allResourceCate.length; i++) {
                    this.allResourceCate[i].checked = false;
                }
                this.getAllResourceList();
            })
        },
        // 获取资源列表
        getAllResourceList() {
            listAllUmsResource().then(resp=>{
                this.allResource = resp.data.data;
                for (let i = 0; i < this.allResource.length; i++) {
                    this.allResource[i].checked = false;
                }
                this.getResourceByRole(this.roleId);
            })
        },
        // 根据角色获取资源
        getResourceByRole(roleId) {
            listResourceByRole(roleId).then(resp=>{
                let allocResource = resp.data.data;
                this.allResource.forEach(item => {
                    item.checked = this.getResourceChecked(item.id, allocResource)
                })
                this.allResourceCate.forEach(item => {
                    item.checked = this.isAllChecked(item.id);
                })
                this.$forceUpdate();
            })
        },
        // 判断该资源是否被选择
        getResourceChecked(resourceId, allocResource) {
            if(allocResource == null || allocResource.length === 0) {
                return false;
            }
            for(let i = 0; i < allocResource.length; i++) {
                if(allocResource[i].id === resourceId) {
                    return true;
                }
            }
            return false;
        },
        // 判断该分类是否被全选
        isAllChecked(categoryId) {
            let cateResources = this.getResourceByCate(categoryId);
            if (cateResources == null) return false;
            let checkedCount = 0;
            for (let i = 0; i < cateResources.length; i++) {
                if (cateResources[i].checked === true) {
                    checkedCount++;
                }
            }
            if(checkedCount===0){
                return false;
            }
            return checkedCount === cateResources.length;
        },
        // 根据分类id查询资源
        getResourceByCate(categoryId) {
            let cateResource = [];
            if (this.allResource == null) {
                return null;
            }
            for (let i = 0; i < this.allResource.length; i++) {
                let resource = this.allResource[i];
                if (resource.categoryId === categoryId) {
                    cateResource.push(resource);
                }
            }
            return cateResource;
        },
        isIndeterminate(categoryId) {
            let cateResources = this.getResourceByCate(categoryId);
            if (cateResources == null) {
                return false;
            }
            let checkedCount = 0;
            for (let i = 0; i < cateResources.length; i++) {
                if (cateResources[i].checked === true) {
                    checkedCount++;
                }
            }
            return !(checkedCount === 0 || checkedCount === cateResources.length);
        },

        handleCheckChange(resource) {
            this.allResourceCate.forEach(item => {
                if(item.id === resource.categoryId) {
                    item.checked = this.isAllChecked(resource.categoryId);
                }
            })
            this.$forceUpdate();
        },
        handleCheckAllChange(cate) {
            let cateResources = this.getResourceByCate(cate.id);
            for (let i = 0; i < cateResources.length; i++) {
                cateResources[i].checked = cate.checked;
            }
            this.$forceUpdate();
        },
        // 保存
        handleSave() {
            this.$confirm('是否分配资源？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(()=>{
                let checkedResourceIds = new Set();
                if (this.allResource != null && this.allResource.length > 0) {
                    this.allResource.forEach(item => {
                        if (item.checked) {
                            checkedResourceIds.add(item.id);
                        }
                    });
                }
                let params = new URLSearchParams();
                params.append("roleId", this.roleId);
                params.append("resourceIds", Array.from(checkedResourceIds));
                allocUmsRoleResource(params).then(resp => {
                    this.$message({
                        message: '分配成功',
                        type: 'success',
                        duration: 1000
                    });
                    this.$router.back();
                })
            })
        },
        // 清空选择
        handleClear() {
            this.allResourceCate.forEach(item => {
                item.checked = false;
            });
            this.allResource.forEach(item => {
                item.checked = false;
            });
            this.$forceUpdate();
        }
    }
}
</script>

<style scoped>
  .table-layout {
    padding: 20px;
    border-left: 1px solid #DCDFE6;
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
  }

  .top-line {
    border-top: 1px solid #DCDFE6;
  }
</style>